<template>
  <div class="near-by">
    <h2 class="title">附近店铺</h2>
    <div class="shop-list">
      <div v-for="shop in shops" :key="shop.id">
        <ShopInfo :shop="shop" @click="()=>redirectToShop(shop.id)" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import shopService from '@/api/service/shopService'
import { useRouter } from 'vue-router'
import ShopInfo from '@/components/ShopInfo'

const userShopEffect = () => {
  const shops = ref([])
  const getShopList = async () => {
    shops.value = await shopService.getShopList()
  }
  return {
    shops,
    getShopList
  }
}

const useShopLinkEffect = () => {
  const router = useRouter()
  const redirectToShop = (id) => {
    router.push({ path: `/shop/${id}` })
  }
  return { redirectToShop }
}
export default {
  name: 'Home',
  components: {
    ShopInfo
  },
  setup () {
    const {
      shops,
      getShopList
    } = userShopEffect()
    getShopList()
    const { redirectToShop } = useShopLinkEffect()
    return {
      redirectToShop,
      shops
    }
  }

}
</script>

<style lang="scss" scoped>
.near-by {
  padding: .16rem .18rem;

  .title {
    font-size: .18rem;
    color: #333333;
  }

  .shop-list {
    margin-top: .14rem;
  }
}

</style>
